<template>
  <div>
    <div class="page-body">
      <div class="page-header">
        <img :src="LOGIN_IMG" />
      </div>
      <div class="page-con">
        <el-menu text-color="balck" class="page-menu" :collapse="appState.menuCollapse" :default-openeds="defaultOpeneds"
          @select="onMenuSelect">
          <!-- <el-menu-item v-for="item in showMenus" :index="`${item.id}`">
            <img style="width:20px;height:20px;margin-right: 5px;" :src="item.icon" />
            <span>{{ item.title }}</span>
          </el-menu-item> -->
          <app-menu-item v-for="item in showMenus" :data-option="item"></app-menu-item>
        </el-menu>
      </div>
      <div class="page-footer">
        <div class="page-footer-title">
          今天是
        </div>
        <div class="page-footer-img">
          <img src="@/assets/app/rili.svg" alt="" srcset="">
          <div class="page-footer-content">
            <div class="page-footer-day">{{ date.getDate() }}</div>
            <div>{{ date.getFullYear() }}-{{ pad(date.getMonth() + 1, 2) }}</div>
            <div>星期{{ week }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, } from "vue";
export default defineComponent({
  name: "AppMenu",
})
</script>

<script lang="ts" setup>
import { reactive, ref, computed, watch } from "vue";
import { showMenus, appState } from "@/store/app";
import AppMenuItem from "../AppMenuItem";
import { MenuNodeClass, TabItemClass } from "@/model/AppModel";
import { addTab, tabsAction, selectTabItem } from "@/store/tabs";
import { ElMessage } from 'element-plus';
import { pad } from "@/utils/base";
import { LOGIN_IMG } from "@/config";

/**
 * 日期
 */
let date = new Date();

let week = computed(() => {
  switch (date.getDay()) {
    case 1: return "一";
    case 2: return "二";
    case 3: return "三";
    case 4: return "四";
    case 5: return "五";
    case 6: return "六";
    case 7: return "日";
  }
})


/**
 * 当前菜单中默认展开的页面
 * 现在保证默认展开一级
 */
let defaultOpeneds = computed<string[]>(() => {
  return showMenus.value.map(item => `${item.id}`);
})


/**
  * 当菜单被激活的时候
  */
async function onMenuSelect(index: string, indexPath: any) {

  //根据路径来获取当前菜单信息
  let menuItem: MenuNodeClass | undefined;
  let menusList: MenuNodeClass[] = showMenus.value;
  for (let indexItem of indexPath) {
    let menusFind = menusList.find(item => {
      return item.id == indexItem;
    });
    if (menusFind) {
      menuItem = menusFind;
      menusList = menusFind.list;
    }
  }

  if (menuItem) {

    if (menuItem.pageName) {
      if (menuItem.tabId && tabsAction.isTab(menuItem.tabId)) {
        //已经存在当前id的tab页签的时候 , 我们直接就展示
        tabsAction.selectTab(menuItem.tabId);
      } else {
        let tabItem = await addTab(menuItem.pageName, {
          title: menuItem.title,
          icon: menuItem.icon
        });
        menuItem.tabId = tabItem.id;
      }

    } else {
      ElMessage.warning("[AM001]当前页面暂未开发")
    }

  } else {
    ElMessage.warning("[AM002]当前页面暂未开发")
  }
}

</script>

<style lang="less" scoped>
@import url("../../config.less");

.page-body {
  width: 100%;
  height: 100%;
  transition: 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
  // background-color: white;
  border-radius: var(--app-border-radius);
  // background-color: #001529;
  background-color: white;
  // &::after {
  //   content: "";
  //   position: absolute;
  //   width: 0.5px;
  //   height: 100%;
  //   right: 0;
  //   top: 0;
  //   background-color: rgba(0, 0, 0, 0.1);
  // }

  // &:hover {
  //   box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
  // }
}

.page-header {
  height: @headerHeight;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  // background-color: var(--primaryColor);
  color: white;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;

  >img {
    max-width: 80%;
    max-height: 90%;
  }
}

.page-header-collapse {}

.page-con {
  flex-grow: 1;
  height: 0;
  // height: calc(100% - @headerHeight);
  overflow: overlay;
  padding-top: 20px;
  // border-top: 1px solid rgba(0, 0, 0, 0.1);

  &::-webkit-scrollbar {
    width: 4px;
    height: 12px;
    background: white;
  }

  /deep/ .el-menu {
    --el-menu-active-color: balck;
    // --el-menu-hover-bg-color: #293540;
    --el-menu-hover-bg-color: #ececec;
    border-right: none;
    background-color: rgba(0, 0, 0, 0);
  }

  // /deep/ .el-menu-item {
  //   opacity: 0.8;

  //   &:hover {
  //     opacity: 1;
  //   }
  // }

  // /deep/ .el-menu-item.is-active {
  //   opacity: 1;
  //   background-color: var(--primaryColor);
  // }
}

.page-footer {
  margin: 15px;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  padding: 30px;
  // background: linear-gradient(360deg, var(--primaryColor20) 0%,rgba(0, 0, 0, 0) 100%);
}

.page-footer-title {
  text-align: center;
  font-size: 13px;
  padding-bottom: 15px;
}

.page-footer-img {
  position: relative;
  // >img{
  //   filter:drop-shadow(0 8px 10px var(--primaryColor50));
  // }
}

.page-footer-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  padding-top: 8px;
}

.page-footer-day {
  font-size: 30px;
  font-weight: bold;
  color: black;
}
</style>
